import styled from "styled-components";

// 定义样式
const InboxContainer = styled.div`
  width: 400px;
  margin: 20px auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;

const Header = styled.header`
  background-color: #e91e63;
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .menu-icon {
    font-size: 24px;
  }

  .search-icon {
    font-size: 20px;
    margin-left: 16px;
  }

  .check-icon {
    font-size: 20px;
  }
`;

const MessageList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
`;

const MessageItem = styled.li`
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 4px;

  &.highlight {
    background-color: #fce4ec;
  }

  .sender {
    font-weight: 600;
  }

  .time {
    font-size: 12px;
    color: #666;
    position: absolute;
    right: 24px;
  }

  .star-icon {
    font-size: 16px;
    color: #ccc;
    position: absolute;
    right: 24px;
  }

  &.highlight .star-icon {
    color: #ffc107;
  }
`;

const InboxComponent = () => {
  const messages = [
    {
      sender: "Ali Connors",
      subject: "Brunch this weekend?",
      content:
        "I'll be in your neighborhood doing errands this weekend. Do yo...",
      time: "15 min",
      highlight: false,
    },
    {
      sender: "me, Scrott, Jennifer",
      subject: "Summer BBQ",
      content: "Wish I could come, but I'm out of town this weekend.",
      time: "2 hr",
      highlight: true,
    },
    {
      sender: "Sandra Adams",
      subject: "Oui oui",
      content: "Do you have Paris recommendations? Have you ever been?",
      time: "6 hr",
      highlight: false,
    },
    {
      sender: "Trevor Hansen",
      subject: "Birthday gift",
      content:
        "Have any ideas about what we should get Heidi for her birthday?",
      time: "12 hr",
      highlight: false,
    },
    {
      sender: "Britta Holt",
      subject: "Recipe to try",
      content: "We should eat this: Grate, Squash, Corn, and tomatillo Tacos.",
      time: "18hr",
      highlight: false,
    },
  ];

  return (
    <InboxContainer>
      <Header>
        <span className="menu-icon">☰</span>
        <h2>Inbox</h2>
        <div>
          <span className="search-icon">🔍</span>
          <span className="check-icon">✅</span>
        </div>
      </Header>
      <MessageList>
        {messages.map((msg, index) => (
          <MessageItem
            key={index}
            className={msg.highlight ? "highlight" : ""}
            style={{ position: "relative" }}
          >
            <div className="sender">{msg.sender}</div>
            <div className="subject">{msg.subject}</div>
            <div className="content">{msg.content}</div>
            <span className="time">{msg.time}</span>
            <span className="star-icon">{msg.highlight ? "★" : "☆"}</span>
          </MessageItem>
        ))}
      </MessageList>
    </InboxContainer>
  );
};

export default InboxComponent;
